<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>xeokit Example</title>
  <link href="../css/pageStyle.css" rel="stylesheet"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
  <style>
    #sliderContainer {
      pointer-events: all;
      height: 100px;
      /*overflow-y: scroll;*/
      overflow-x: hidden;
      position: absolute;
      bottom: 0;
      color: black;
      z-index: 200000;
      float: left;
      left: 0;
      padding-left: 10px;
      padding-right: 10px;
      font-family: 'Roboto', sans-serif;
      font-size: 15px;
      user-select: none;
      -ms-user-select: none;
      -moz-user-select: none;
      -webkit-user-select: none;
      width: 95%;
    }
    input {
      vertical-align: middle;
    }
    .slider {
      width: 100%;
    }
    #info-button:checked ~ #sliderContainer {
      width: calc(95% - 400px);
    }
  </style>
</head>
<body>
<input type="checkbox" id="info-button"/>
<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
<canvas id="myCanvas"></canvas>
<div id="sliderContainer">
  <label>
    <input id="section_path" type="range" min="0" max="1" value="0" step="0.0001" class="slider">
  </label>
</div>
<div class="slideout-sidebar">
  <img class="info-icon" src="../../assets/images/section_plane_icon.png"/>
  <h1>SectionPlanesPlugin with colorized cross sections</h1>
  <h2>Slices models open to reveal internal structures along the path</h2>
  <p>In this example, we're loading an IFC2x3 BIM model from the file system, then slicing it with a section
    plane and controlling it via slider along the section path. In this example, we're also colorizing the
  part where the SectionPlane slices the model.</p>
  <h3>Stats</h3>
  <ul>
    <li>
      <div id="time">Loading JavaScript modules...</div>
    </li>
  </ul>
  <h3>Components used</h3>
  <ul>
    <li>
      <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
         target="_other">Viewer</a>
    </li>
    <li>
      <a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
         target="_other">XKTLoaderPlugin</a>
    </li>
    <li>
      <a href="../../docs/class/src/plugins/SectionPlanesPlugin/SectionPlanesPlugin.js~SectionPlanesPlugin.html"
         target="_other">SectionPlanesPlugin</a>
    </li>
    <li>
      <a href="../../docs/class/src/viewer/scene/postfx/CrossSections.js~CrossSections.html"
         target="_other">CrossSections</a>
    </li>
  </ul>
  <h3>Resources</h3>
  <ul>
    <li>
      <a href="http://openifcmodel.cs.auckland.ac.nz/Model/Details/274"
         target="_other">Model source</a>
    </li>
  </ul>
</div>
</body>

<script type="module">

  //------------------------------------------------------------------------------------------------------------------
  // Import the modules we need for this example
  //------------------------------------------------------------------------------------------------------------------

  import {PhongMaterial, Viewer, math, SectionPlanesPlugin, XKTLoaderPlugin, Mesh, ReadableGeometry, buildPolylineGeometryFromCurve, SplineCurve} from "../../dist/xeokit-sdk.es.js";

  //------------------------------------------------------------------------------------------------------------------
  // Create a Viewer and arrange the camera
  //------------------------------------------------------------------------------------------------------------------

  const viewer = new Viewer({
    canvasId: "myCanvas",
    transparent: true
  });

  viewer.camera.eye = [-2.341298674548419, 22.43987089731119, 7.236688436028655];
  viewer.camera.look = [4.399999999999963, 3.7240000000000606, 8.899000000000006];
  viewer.camera.up = [0.9102954845584759, 0.34781746407929504, 0.22446635042673466];

  const cameraControl = viewer.cameraControl;
  cameraControl.navMode = "orbit";
  cameraControl.followPointer = true;

  //----------------------------------------------------------------------------------------------------------------------
  // Create a xeokit loader plugin, load a model, fit to view
  //----------------------------------------------------------------------------------------------------------------------

  const xktLoader = new XKTLoaderPlugin(viewer);

  var t0 = performance.now();

  document.getElementById("time").innerHTML = "Loading model...";

  const sceneModel = xktLoader.load({
    id: "myModel",
    src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
    edges: true
  });

  sceneModel.on("loaded", () => {
    var t1 = performance.now();
    document.getElementById("time").innerHTML = "Model loaded in " + Math.floor(t1 - t0) / 1000.0 + " seconds<br>Objects: " + sceneModel.numEntities;

    let path = new SplineCurve(viewer.scene, {
      points: [
        [0, 0, -10],
        [0, 0, -3],
        [10, 0, 10],
        [10, 0, 30],
      ],
    });

    new Mesh(viewer.scene, {
      geometry: new ReadableGeometry(viewer.scene, buildPolylineGeometryFromCurve({
        id: "SplineCurve",
        curve: path,
        divisions: 50,
      })),
      material: new PhongMaterial(viewer.scene, {
        emissive: [1, 0, 0]
      })
    });

    //------------------------------------------------------------------------------------------------------------------
    // Create a moving SectionPlane, that moves through the table models
    //------------------------------------------------------------------------------------------------------------------

    const sectionPlanes = new SectionPlanesPlugin(viewer, {
      overviewCanvasId: "mySectionPlanesOverviewCanvas",
      overviewVisible: true
    });

    let currentPoint = path.getPoint(0);
    let currentDirection = path.getTangent(0);

    const sectionPlane = sectionPlanes.createSectionPlane({
      id: "mySectionPlane",
      pos: currentPoint,
      dir: currentDirection
    });

    sectionPlanes.showControl(sectionPlane.id);

    //------------------------------------------------------------------------------------------------------------------
    // Controlling SectionPlane position and direction
    //------------------------------------------------------------------------------------------------------------------

    let currentT = 0.0;
    document.getElementById("section_path").oninput = function() {
      currentT = Number(document.getElementById("section_path").value);
      currentPoint = path.getPoint(currentT);
      currentDirection = path.getTangent(currentT);
      sectionPlane.pos = currentPoint;
      sectionPlane.dir = currentDirection;
    };

    window.viewer = viewer;

    //------------------------------------------------------------------------------------------------------------------
    // Controlling CrossSections settings
    //------------------------------------------------------------------------------------------------------------------

    viewer.scene.crossSections.sliceThickness = 0.05;
    viewer.scene.crossSections.sliceColor = [0.0, 0.0, 0.0, 1.0];
  });


</script>
</html>